<script setup>

</script>

<template>
  <Modal title="USER INFORMATION" :editShow="true">
    <template #body>
      <div class="flex flex-row justify-between items-center mt-[16px] s2k:mt-[21.3px] s4k:mt-[32px] font-Inter">
        <div class="flex-[1]">
          <p class="text-[var(--theme-font-desc-color)] text-[1.13rem]">User Role</p>
          <p class="text-[1.3rem] text-[var(--theme-font-color)] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">Admin</p>
        </div>
        <div class="flex-[1]">
          <p class="text-[var(--theme-font-desc-color)] text-[1.13rem]">User Type</p>
          <p class="text-[1.3rem] text-[var(--theme-font-color)] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">SuperUser</p>
        </div>
      </div>
    </template>
  </Modal>
  <Modal title="LIVE VIEW" :editShow="true">
    <template #body>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Live View</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">Ability to see or edit the LIVE View module</p>
        </div>
        <div class="text-[var(--theme-font-desc-color)] text-[1.3rem]">%</div>
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">See Camera stream image</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">If users are not granted this permission, they will not be able to see any live camera feeds</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Take Snapshot from LIVE View</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Ability to toggle on Live 3D feature</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
    </template>
  </Modal>
  <Modal title="CAMERA" :editShow="true">
    <template #body>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Camera Module</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">Ability to see or edit the Camera module</p>
        </div>
        <div class="text-[var(--theme-font-desc-color)] text-[1.3rem]">%</div>
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Ability to see Camera Info</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">If users are not granted this permission, they would not be able to see any information about cameras</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full h-[42px] text-[1.13rem] text-[var(--theme-font-desc-color)] flex flex-col justify-center s2k:h-[56px] s4k:h-[84px] border-t border-solid border-[var(--grid)] mt-[30px] s2k:mt-[40px] s4k:mt-[60px]">PTZ Cameras</div>
      <div class="w-full flex flex-row justify-between items-center mt-[30px] s2k:mt-[40px] s4k:mt-[60px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Ability to use PTZ Cameras</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Add, edit, and delete PTZ presets and patrolling profiles on PTZ cameras</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
    </template>
  </Modal>
  <Modal title="RECORDING" :editShow="true">
    <template #body>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Stop manual recording in LIVEView</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Take manual recording in LIVEView</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Recording Schedule</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">Ability to see or edit the Recording Schedule in the Camera module</p>
        </div>
        <div class="text-[var(--theme-font-desc-color)] text-[1.3rem]">%</div>
      </div>
    </template>
  </Modal>
  <Modal title="PLAYBACK" :editShow="true">
    <template #body>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">View Playback</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">Ability to view the Playback module</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Video Recordings</p>
        </div>
        <div class="text-[var(--theme-font-desc-color)] text-[1.3rem]">View Only</div>
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Export Recordings</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Snapshots</p>
        </div>
        <div class="text-[var(--theme-font-desc-color)] text-[1.3rem]">View Only</div>
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Export Snapshot</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
    </template>
  </Modal>
  <Modal title="ACTIVITY LOG" :editShow="true">
    <template #body>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">View Activity Log</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">If users are not granted this permission, they will not be able to see the Activity Log module</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Export Activity Log entries</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
    </template>
  </Modal>
  <Modal title="USER MANAGEMENT" :editShow="true">
    <template #body>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Manage User Roles and User Accounts</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">If users are not granted this permission, they will not have access to the User Management module</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full h-[42px] text-[1.13rem] text-[var(--theme-font-desc-color)] flex flex-col justify-center s2k:h-[56px] s4k:h-[84px] border-t border-solid border-[var(--grid)] mt-[30px] s2k:mt-[40px] s4k:mt-[60px]">User Roles</div>
      <div class="w-full flex flex-row justify-between items-center mt-[30px] s2k:mt-[40px] s4k:mt-[60px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Create and remove User Roles</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Edit User Roles</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">Change User Role, User Hierarchy, and User Permissions</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Assign User Roles to User Accounts</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full h-[42px] text-[1.13rem] text-[var(--theme-font-desc-color)] flex flex-col justify-center s2k:h-[56px] s4k:h-[84px] border-t border-solid border-[var(--grid)] mt-[30px] s2k:mt-[40px] s4k:mt-[60px]">User Accounts</div>
      <div class="w-full flex flex-row justify-between items-center mt-[30px] s2k:mt-[40px] s4k:mt-[60px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Create and remove User Accounts</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Edit User Accounts</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">User will be able to edit user accounts of accounts below their hierarchy</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Edit their own password</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
    </template>
  </Modal>
  <Modal title="SYSTEM SETTINGS" :editShow="true">
    <template #body>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Edit Storage Settings</p>
          <p class="w-[728px] s2k:w-[970.6px] s4k:w-[1456px] leading-[20px] s2k:leading-[26.6px] s4k:leading-[40px] text-[var(--theme-font-desc-color)] text-[1.13rem] mt-[5px] s2k:mt-[6.6px] s4k:mt-[10px]">User can edit details about hard disk storage, maximum storage limits, and time periods to store recorded items. </p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
      <div class="w-full flex flex-row justify-between items-center mt-[40px] s2k:mt-[53.3px] s4k:mt-[80px] mb-[15px] s2k:mb-[20px] s4k:mb-[30px]">
        <div>
          <p class="text-[var(--theme-font-color)] text-[1.3rem]">Edit Alert Settings</p>
        </div>
        <input type="checkbox" class="text-[1.3rem] w-[16px] h-[16px] s2k:w-[21.3px] s2k:h-[21.3px] s4k:w-[32px] s4k:h-[32px] rounded bg-[var(--grid)] cursor-pointer">
      </div>
    </template>
  </Modal>
  <div class="mb-[100px] s2k:mb-[130px] s4k:mb-[200px]"></div>
</template>

<style scoped lang="scss">

</style>